<script setup lang="ts">
import { RouterView, useRoute, useRouter } from 'vue-router'
import { ref, watch, computed, onMounted } from 'vue'
import {
  Menu as IconMenu,
  House,
  Document,
  Edit,
  DataAnalysis,
  Collection,
  Timer,
  User,
  Setting,
  SwitchButton,
  ChatLineRound,
} from '@element-plus/icons-vue'
import UserApi from './apis/Userapi'

const route = useRoute()
const router = useRouter()
const isCollapse = ref(false)
const isDarkMode = ref(false)

const currentPath = computed(() => route.path)

// 判断是否显示侧边栏和头部
const showLayout = computed(() => {
  return !route.path.includes('/login') && !route.path.includes('/register')
})

// const fetchCurrentUser = async () => {
//   const res = await UserApi.getUsers('john_doe')
//   console.log(res)
// }

// onMounted(() => {
//   fetchCurrentUser()
// })

// 切换暗黑模式
const toggleDarkMode = () => {
  isDarkMode.value = !isDarkMode.value
  document.documentElement.setAttribute('data-theme', isDarkMode.value ? 'dark' : 'light')
}

// 退出登录
const logout = () => {
  UserApi.logout()
  localStorage.removeItem('token')
  localStorage.removeItem('role')
  localStorage.removeItem('username')
  router.push('/login')
}

watch([isDarkMode], () => {
  document.body.className = isDarkMode.value ? 'dark-mode' : ''
})
</script>

<template>
  <div class="app-container" :class="{ 'dark-mode': isDarkMode }">
    <!-- 登录注册页面不显示布局 -->
    <template v-if="showLayout">
      <el-container class="main-container">
        <!-- 侧边栏 -->
        <el-aside width="auto" class="aside-container">
          <div class="logo-container" :class="{ 'mini-logo': isCollapse }">
            <img
              v-if="!isCollapse"
              src="/src/assets/images/logo.svg"
              alt="ClassPrepHub"
              class="logo"
            />
            <img v-else src="/src/assets/images/logo.svg" alt="C" class="logo-mini" />
          </div>

          <el-menu
            :default-active="currentPath"
            class="el-menu-vertical"
            :collapse="isCollapse"
            @select="(index: string) => router.push(index)"
            router
          >
            <el-menu-item index="/dashboard">
              <el-icon><House /></el-icon>
              <template #title>首页</template>
            </el-menu-item>

            <el-sub-menu index="teaching-design">
              <template #title>
                <el-icon><Collection /></el-icon>
                <span>教学设计</span>
              </template>
              <el-menu-item index="/task/create">创建备课</el-menu-item>
              <el-menu-item index="/teaching-design">AI PPT助手</el-menu-item>
              <el-menu-item index="/resources">教学资源</el-menu-item>
            </el-sub-menu>

            <el-sub-menu index="exercises">
              <template #title>
                <el-icon><Edit /></el-icon>
                <span>习题管理</span>
              </template>
              <el-menu-item index="/exercises">习题库</el-menu-item>
              <el-menu-item index="/exercises/create">AI组卷助手</el-menu-item>
            </el-sub-menu>

            <el-menu-item index="/analysis">
              <el-icon><DataAnalysis /></el-icon>
              <template #title>数据分析</template>
            </el-menu-item>

            <el-menu-item index="/history">
              <el-icon><Timer /></el-icon>
              <template #title>历史记录</template>
            </el-menu-item>

            <el-menu-item index="/ai-assistant">
              <el-icon><ChatLineRound /></el-icon>
              <template #title>AI备课助手</template>
            </el-menu-item>
          </el-menu>

          <div class="collapse-button" @click="isCollapse = !isCollapse">
            <el-icon><IconMenu /></el-icon>
          </div>
        </el-aside>

        <!-- 主要内容区域 -->
        <el-container>
          <!-- 头部导航 -->
          <el-header class="header-container">
            <div class="header-left">
              <h2 class="page-title">{{ route.meta.title || '班级备课中心' }}</h2>
            </div>
            <div class="header-right">
              <el-switch
                v-model="isDarkMode"
                inline-prompt
                active-text="暗"
                inactive-text="亮"
                @change="toggleDarkMode"
                class="theme-switch"
              />

              <el-dropdown trigger="click">
                <div class="user-info">
                  <el-avatar :size="32" class="user-avatar">教师</el-avatar>
                  <span class="username">张老师</span>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="router.push('/profile')">
                      <el-icon><User /></el-icon>个人中心
                    </el-dropdown-item>
                    <el-dropdown-item @click="router.push('/settings')">
                      <el-icon><Setting /></el-icon>系统设置
                    </el-dropdown-item>
                    <el-dropdown-item divided @click="logout">
                      <el-icon><SwitchButton /></el-icon>退出登录
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </el-header>

          <!-- 内容区域 -->
          <el-main>
            <RouterView />
          </el-main>
        </el-container>
      </el-container>
    </template>
    <template v-else>
      <RouterView />
    </template>
  </div>
</template>

<style>
/* 全局样式 */
:root {
  --background-color: #f5f7fa;
  --text-color: #333;
  --border-color: #e4e7ed;
  --header-bg: #fff;
  --aside-bg: #fff;
  --hover-color: #f2f6fc;
}

.dark-mode {
  --background-color: #1e1e1e;
  --text-color: #eee;
  --border-color: #444;
  --header-bg: #252525;
  --aside-bg: #252525;
  --hover-color: #333;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: var(--text-color);
  background-color: var(--background-color);
  transition:
    background-color 0.3s,
    color 0.3s;
}

.app-container {
  height: 100vh;
  width: 100vw;
}
</style>

<style scoped>
.main-container {
  height: 100vh;
}

.aside-container {
  background-color: var(--aside-bg);
  border-right: 1px solid var(--border-color);
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
}

.header-container {
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
}

.logo-container {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}

.logo {
  height: 40px;
}

.logo-mini {
  height: 30px;
  width: 30px;
}

.mini-logo {
  height: 60px;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.page-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 200px;
  flex: 1;
}

.collapse-button {
  border-top: 1px solid var(--border-color);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-color);
}

.collapse-button:hover {
  background-color: var(--hover-color);
}

.el-menu {
  border-right: none;
}

.theme-switch {
  margin-right: 15px;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.username {
  margin-left: 8px;
  font-size: 14px;
}

.user-avatar {
  background-color: #409eff;
}
</style>
